/*
 * @Author: yuanxiang 
 * @Date: 2018-05-14 10:43:47 
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2018-08-24 09:43:11
 */
<template>
    <div class="analyMenu"> 
        <bg-lay-out :hideMarginLeft="true" :widthSize="true">
            <div slot="headerText">中浩德数据中心驾驶舱</div>
            <div slot="main" class="cockpit">
                <div class="bg4Center">
                    <div class="bg4ItemCenter  blockLeft" style="top: 34%;left: 20.7%;" @click="$router.push('/pages/bigDatadc')">
                        <icon-svg icon-class="hddc" style="" :iconStyle="iconSvg"></icon-svg>
                    </div>
                    <div class="bg4ItemCenter blockLeftTop" style="top:23%;left:32%;" @click="$router.push('/pages/bigData3/finance/financial')">
                        <icon-svg icon-class="cwbb" style="position: absolute;left: 4px;top: -24px;" :iconStyle="iconSvg"></icon-svg>
                    </div>
                    <div class="bg4ItemCenter blockLeftBottom" style="top:45%;left:32%;" @click="$router.push('/pages/bigDataflh/flhDataPanel')">
                        <icon-svg icon-class="flh" style="" :iconStyle="iconSvg"></icon-svg>
                    </div>
                    <div class="bg4ItemCenter blockMid noOk" style="top:56%;left:43.3%;" @click="noWork">
                        <icon-svg icon-class="hdcf" style="" :iconStyle="iconSvg"></icon-svg>
                    </div>
                    <div class="bg4ItemCenter blockMidBottom" style="top:34%;left:43.3%;" @click="$router.push('/pages/keyJob/allSale')">
                        <icon-svg icon-class="zdgzbs" style="position: absolute;left: 8px;top: -20px;" :iconStyle="iconSvg"></icon-svg>
                    </div>
                    <div class="bg4ItemCenter blockRightTop" style="top:23%;left:54.6%;" @click="$router.push('/pages/bigDatarl')">
                        <icon-svg icon-class="hr" style="position: absolute;left: 3px;top: -16px;" :iconStyle="iconSvg"></icon-svg>
                    </div>
                    <div class="bg4ItemCenter blockRightBottom" style="top:45%;left:54.6%;" @click="$router.push('/pages/bigDatacyy')">
                        <icon-svg icon-class="cyy" style="position: absolute;left: 3px;top: 5px;" :iconStyle="iconSvg"></icon-svg>
                    </div>
                    <div class="bg4ItemCenter blockRight" style="top:34%;left:66%;" @click="$router.push('/pages/bigData3/steelRingData')">
                        <icon-svg icon-class="gq" style="position: absolute;left: 3px;top: 6px;" :iconStyle="iconSvg"></icon-svg>
                    </div>
                </div>
            </div>
        </bg-lay-out>
    </div>
</template>
<script>
import { getTokenName } from "@/utils/auth";
import bgLayOut from "@/components/bgLayOut/index";
export default {
  data() {
    this.$router.replace("/");
    return {
      iconSvg: "width:100%;height:100%"
    };
  },
  components: {
    bgLayOut
  },
  computed: {
    tokenName() {
      return getTokenName();
    }
  },
  watch: {},
  mounted: function() {
    // this.resizeScreen();
  },
  methods: {
    noWork() {
      this.$message({
        message: "该模块正在努力研发中。。。。。",
        duration: 1000
      });
    },
    resizeScreen() {
      var valX = 0;
      var valY = 0;
      var screenH = window.screen.height;
      if (Number(screenH) === 1366) {
        valX = document.documentElement.clientWidth / 1366;
        valY = document.documentElement.clientHeight / 768;
      } else {
        valX = document.documentElement.clientWidth / 1920;
        valY = document.documentElement.clientHeight / 1080;
      }
      document.getElementById("app").style.transform =
        "translateZ(0) scale(" + valX + "," + valY + ")";
    }
  }
};
</script>
<style>
.analyMenu .bg4Con {
  top: 0 !important;
  height: 100% !important;
}
</style>
<style scoped>
.cockpit {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.noOk {
  opacity: 0.6;
}
/*buitton_offmdp*/
.blockRight:hover,
.blockRightBottom:hover,
.blockRightTop:hover,
.blockMidBottom:hover,
.blockMid:hover,
.blockLeftBottom:hover,
.blockLeft:hover,
.blockLeftTop:hover {
  transform: scale(1.5, 1.5);
  z-index: 1000px;
}
.bg4ItemCenter {
  position: absolute;
  width: 258px;
  height: 228px;
  background-image: url("../../../../../static/img/bigData4/card.png");
  background-size: 100% 100%;
  background-repeat:  no-repeat;
  border-radius: 70px;
  transform: scale(1, 1);
  transition: transform 0.5s;
  cursor: pointer;
}
.bg4ItemCenter:hover {
  background-image: url("../../../../../static/img/bigData4/card_hover.png");
}
.bg4Center {
  width: 1491px;
  height: 675px;
  background-image: url("../../../../../static/img/bigData4/window.png");
  background-size: 100% 100%;
  background-repeat:  no-repeat;
}
</style>
